顶部的 Toolbar 是什么以及如何实现的

1. 顶部的 Toolbar 是什么

DataWorks 数据开发的编辑器顶部的工具栏按钮。与右上角的按钮的区别是，右上角的按钮是全局性质的。而顶部的工具栏按钮是针对编辑器的，是编辑器的一部分。这个位置放到这里的意义在与：

1. 延续 DataWorks 编辑器的用户习惯。
2. 让用户感觉到这个按钮，是属于这个编辑器的，而不是写完代码之后，需要去右上角点击一下才可以运行。

2. 实现的效果

通过 menus 中声明一个新的 key 值。

3. 如何实现的

1. 扩展进程中，需要 meunService 响应到扩展安装/卸载处， 声明一下这个 Key.
2. 自定义编辑器
   1. 编辑器的组成：
      1. EditorPane: UI
      2. Input: 数据
      3. Seralizer: 序列化
      4. Model ???
   2. 需要改写 EditorPane 中的 Editor 模块，将自定义的 UI 注入进去。
   3. 这里需要用到一个内部组件叫做 SplitView，因为需要空出顶部的空间（和右侧的空间）。

编辑器新版的 Codelens

1. 原本的 Codelens

编辑器 Line 顶部的小字部分，比较常见的 case 是 diff，修改时间等。

2. 我们的场景

我们将运行效果移动到了垂直的 lineNumber 左侧，debug 的位置。

1. 我们希望将编辑器中的代码，分段之后，展示给用户看，哪些是可以分段运行的。
2. 鼠标 focus 或者 hover 到这些代码上的时候，可以点击运行。
3. 选中代码片段，快捷键运行。

3. TODO: 实现原理

1. OverlayWight，编辑器上添加一个浮动的组件，可以定义位置，例如 Merge Editor 右下角的按钮之类的都是，搜索框的位置也是。
2. lsp 将当前编辑器的 sql 代码，分段返回，默认情况下，已经知道当前的 sql 被分成了多少句。并且在默认情况下，显示第一个分段的 codelens，有 coelens 运行按钮预计 declration 的位置。（lineNumber 的装饰）
3. 鼠标 hover 或者 focus 时，显示当前鼠标所在行列的，语句的装饰。
4. 问题处理：
   1. 一行内多行语句的去重
   2. codelens 的缓存。

右侧面板定义

自定义了一个 Panel，用于渲染 Webview。

场景

实现方式

运行参数

从代码中解析出参数，${} 等

SDK